<template>
  <div class="carousel-container">
    <h2>图片轮播组件</h2>

    <div class="carousel" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
      <div class="carousel-wrapper">
        <TransitionGroup name="slide" tag="div" class="carousel-inner">
          <div
            v-for="(image, index) in images"
            v-show="index === currentIndex"
            :key="image.id"
            class="carousel-item"
          >
            <img :src="image.url" :alt="image.title" />
            <div class="carousel-caption">
              <h3>{{ image.title }}</h3>
              <p>{{ image.description }}</p>
            </div>
          </div>
        </TransitionGroup>
      </div>

      <button class="carousel-btn carousel-prev" @click="prevSlide">&#8249;</button>
      <button class="carousel-btn carousel-next" @click="nextSlide">&#8250;</button>

      <div class="carousel-indicators">
        <button
          v-for="(image, index) in images"
          :key="index"
          :class="{ active: index === currentIndex }"
          @click="goToSlide(index)"
        ></button>
      </div>
    </div>

    <div class="controls">
      <button @click="toggleAutoPlay">
        {{ isAutoPlaying ? '暂停自动播放' : '开始自动播放' }}
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const currentIndex = ref(0)
const isAutoPlaying = ref(true)
let autoPlayTimer = null

const images = ref([
  {
    id: 1,
    url: 'https://via.placeholder.com/800x400/3498db/white?text=Image+1',
    title: '美丽风景',
    description: '这是第一张图片的描述',
  },
  {
    id: 2,
    url: 'https://via.placeholder.com/800x400/e74c3c/white?text=Image+2',
    title: '城市夜景',
    description: '这是第二张图片的描述',
  },
  {
    id: 3,
    url: 'https://via.placeholder.com/800x400/2ecc71/white?text=Image+3',
    title: '自然风光',
    description: '这是第三张图片的描述',
  },
  {
    id: 4,
    url: 'https://via.placeholder.com/800x400/f39c12/white?text=Image+4',
    title: '现代建筑',
    description: '这是第四张图片的描述',
  },
])

const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % images.value.length
}

const prevSlide = () => {
  currentIndex.value = (currentIndex.value - 1 + images.value.length) % images.value.length
}

const goToSlide = (index) => {
  currentIndex.value = index
}

const startAutoPlay = () => {
  if (isAutoPlaying.value) {
    autoPlayTimer = setInterval(nextSlide, 3000)
  }
}

const stopAutoPlay = () => {
  if (autoPlayTimer) {
    clearInterval(autoPlayTimer)
    autoPlayTimer = null
  }
}

const toggleAutoPlay = () => {
  isAutoPlaying.value = !isAutoPlaying.value
  if (isAutoPlaying.value) {
    startAutoPlay()
  } else {
    stopAutoPlay()
  }
}

onMounted(() => {
  startAutoPlay()
})

onUnmounted(() => {
  stopAutoPlay()
})
</script>
<style scoped>
.carousel-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.carousel {
  position: relative;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.carousel-wrapper {
  position: relative;
  height: 400px;
}

.carousel-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 20px;
}

.carousel-caption h3 {
  margin: 0 0 5px 0;
  font-size: 1.5em;
}

.carousel-caption p {
  margin: 0;
  opacity: 0.9;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  font-size: 24px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.carousel-prev {
  left: 10px;
}

.carousel-next {
  right: 10px;
}

.carousel-indicators {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.carousel-indicators button {
  width: 12px;
  height: 12px;
  border: 2px solid white;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel-indicators button.active {
  background: white;
}

.controls {
  text-align: center;
  margin-top: 20px;
}

.controls button {
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 滑动过渡效果 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.slide-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
</style>
